{extend name="base/main" /}
{block name="body"}
<link rel="stylesheet" href="/static/layui/css/layui.css">
<script src="/static/layui/layui.js"></script>
    <div class="wrapper wrapper-content animated fadeInRight">
        <div class="ibox float-e-margins">
            <div class="ibox-title">
                <h5>课程管理 /图文列表</h5>
            </div>
            <div class="ibox-content">
             <form name="form" id="f" action="{:url('Map/save')}" class="form-horizontal m-t"  >
            <div class="layui-tab">
              <ul class="layui-tab-title">
                <li class="layui-this">基础设置</li>
                <li class="layui-this">素材选择</li>
                <li class="layui-this">价格设置</li>
              </ul>
              <div class="layui-tab-content">
                <div class="layui-tab-item layui-show">
                
                <div class="form-group">
                        <label class="col-sm-2 control-label">专栏名称：</label>
                        <div class="col-sm-4">
                            <input name="title" class="form-control" type="text" id="title">
                        </div>
                </div>
                <div class="form-group">
                   <label class="col-sm-2 control-label">分类选择：</label>
                   <div class="col-sm-4">
                       <select name="subject_id" class="form-control" style="width: 200px">
                        <option value="">请选择</option>
                        {foreach $list as $key=>$vo}
                        <option value="{$vo.id}" name="">{$vo.name}</option>
                        {/foreach}
                   </select>
                   </div>
               </div>
                <div class="form-group">
                        <label class="col-sm-2 control-label">专栏简介：</label>
                        <div class="col-sm-4">
                         <textarea name="abstract" ></textarea>
                        </div>
                </div>
                <div class="form-group">
                        <label class="col-sm-2 control-label">专栏短语：</label>
                        <div class="col-sm-4">
                         <textarea name="phrase" ></textarea>
                        </div>
                </div>
                 <div class="form-group">
                        <label class="col-sm-2 control-label">专栏排序：</label>
                        <div class="col-sm-4">
                            <input name="sort" class="form-control" type="text" id="title">
                        </div>
                 </div>
                  <div class="form-group">
                        <label class="col-sm-2 control-label">专栏标签：</label>
                        <div class="col-sm-4">
                            <input name="label" class="form-control" type="text" id="title">
                        </div>
                </div>
                <div class="form-group">
                    <div class="layui-upload">
                        <label class="col-sm-2 control-label">专栏封面：</label>
                        <div class="col-sm-4">
                            <button type="button" class="layui-btn" id="test1">上传图片</button>
                            <div class="layui-upload-list">
                                <img class="layui-upload-img" id="demo1" width="100px" height="100px">
                                <input type="hidden" name="image" id="image">
                                <p id="demoText"></p>
                            </div>
                        </div>
                    </div>
                </div>
                 <div class="form-group">
                    <div class="layui-upload">
                        <label class="col-sm-2 control-label">专栏banner：</label>
                        <div class="col-sm-4">
                            <button type="button" class="layui-btn" id="test2">上传图片</button>
                            <div class="layui-upload-list">
                                <img class="layui-upload-img" id="demo2" width="100px" height="100px">
                                <input type="hidden" name="banner" id="banner">
                                <p id="demoText"></p>
                            </div>
                        </div>
                    </div>
                </div>
                 <div class="form-group">
                    <div class="layui-upload">
                        <label class="col-sm-2 control-label">推广分类：</label>
                        <div class="col-sm-4">
                            <button type="button" class="layui-btn" id="test3">上传图片</button>
                            <div class="layui-upload-list">
                                <img class="layui-upload-img" id="demo3" width="100px" height="100px">
                                <input type="hidden" name="poster_image" id="poster_image">
                                <p id="demoText"></p>
                            </div>
                        </div>
                    </div>
                </div>
                 <div class="form-group">
                    <div class="layui-upload">
                        <label class="col-sm-2 control-label">客服二维码：</label>
                        <div class="col-sm-4">
                            <button type="button" class="layui-btn" id="test4">上传图片</button>
                            <div class="layui-upload-list">
                                <img class="layui-upload-img" id="demo4" width="100px" height="100px">
                                <input type="hidden" name="service_code" id="service_code">
                                <p id="demoText"></p>
                            </div>
                        </div>
                    </div>
                </div>
                 <div class="form-group">
                        <label class="col-sm-2 control-label">插入视频：</label>
                        <div class="col-sm-4">
                         <input name="link" id="link" class="form-control" type="text" ><button class="layui-btn" >确认添加</button>
                          <button type="button" class="layui-btn" id="test11"><i class="layui-icon"></i>上传视频</button>
                        </div>
                </div>
                 <div class="form-group">
                        <label class="col-sm-2 control-label">专题内容：</label>
                        <div class="col-sm-4">
                           <textarea name="content" id="editor_id"> </textarea>
 
                        </div>
                </div>
                </div>
                <div class="layui-tab-item">
                     <div class="form-group">
                        <label class="col-sm-2 control-label">专题选择：</label>
                        <div class="col-sm-4">
                          <span class="btn btn-primary" id="matter">点击专题素材</span>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-2 control-label">专题展示：</label>
                        <div class="col-sm-4">
                          <table class="layui-table" lay-skin="row" id="material_list">
                              <tr>
                                  <td>编号</td>
                                  <td>素材标题</td>
                                  <td>封面</td>
                                  <td>是否免费</td>
                                  <td>操作</td>
                              </tr>
                              
                          </table>
                          <input type="hidden" name="matter_id" id="matter_id">
                        </div>
                    </div>
                </div>
                <div class="layui-tab-item">
                <div class="form-group">
                    <label class="col-sm-2 control-label">付费类型：</label>
                    <div class="col-sm-4">
                        <div class="radio i-checks" style="height: 60px;">
                            <label class="pay"><input type="radio" value="1" name="pay_type" ><i></i>付费</label>
                            <label class="pay"><input type="radio" value="2" name="pay_type" checked><i></i>收费</label>
                        </div>
                    </div>
                </div>
                <div class="payyer" name="payyer" style="display: none;">
                    <div class="form-group">
                            <label class="col-sm-2 control-label">购买金额：</label>
                            <div class="col-sm-4">
                                <input name="money" style="width: 40%" type="number"  lay-verify="number"
                                            v-model="formData.money" autocomplete="off" class="layui-input" >
                            </div>
                    </div>
                     <div class="form-group">
                            <label class="col-sm-2 control-label">会员付费方式：</label>
                            <div class="col-sm-4">
                               <div class="radio i-checks" style="height: 60px;">
                                <label class="member"><input type="radio" value="1" name="member_pay_type" ><i></i>付费</label>
                                <label class="member"><input type="radio" value="2" name="member_pay_type" checked><i></i>收费</label>
                             </div>
                            </div>
                    </div>
                    <div class="members" name="members" style="display: none;">
                           <div class="form-group">
                            <label class="col-sm-2 control-label">会员购买金额：</label>
                            <div class="col-sm-4">
                                <input name="member_money" style="width: 40%" type="number" name="money" lay-verify="number"
                                            v-model="formData.money" autocomplete="off" class="layui-input" >
                            </div>
                        </div>
                    </div>
                     <div class="form-group">
                            <label class="col-sm-2 control-label">拼团是否开启：</label>
                            <div class="col-sm-4">
                                <div class="radio i-checks" style="height: 60px;">
                                <label class="group"><input type="radio" value="1" name="is_pink" checked><i></i>关闭</label>
                                <label class="group"><input type="radio" value="2" name="is_pink" ><i></i>开启</label>
                               </div>
                            </div>
                    </div>
                    <div class="groups" name="groups" style="display: none;">
                        <div class="form-group">
                            <label class="col-sm-2 control-label">拼团金额：</label>
                            <div class="col-sm-4">
                                <input name="pink_money" style="width: 40%" type="number" lay-verify="number"
                                            v-model="formData.money" autocomplete="off" class="layui-input" >
                            </div>
                        </div>
                          <div class="form-group">
                            <label class="col-sm-2 control-label">拼团人数：</label>
                            <div class="col-sm-4">
                                <input name="pink_number" style="width: 40%" type="number" lay-verify="number"
                                            v-model="formData.money" autocomplete="off" class="layui-input">
                            </div>
                        </div>
                         <div class="form-group">
                            <label class="col-sm-2 control-label">开始时间：</label>
                            <div class="col-sm-4">
                               <input type="text" class="layui-input" id="test5" name="pink_strar_time">
                            </div>
                        </div>
                         <div class="form-group">
                            <label class="col-sm-2 control-label">结束时间：</label>
                            <div class="col-sm-4">
                                <input type="text" class="layui-input" id="test5" name="pink_end_time">
                            </div>
                        </div>
                         <div class="form-group">
                            <label class="col-sm-2 control-label">拼团时间（小时）：</label>
                            <div class="col-sm-4">
                                <input name="pink_time" style="width: 40%" type="number"  lay-verify="number"
                                            v-model="formData.money" autocomplete="off" class="layui-input">
                            </div>
                        </div>
                         <div class="form-group">
                            <label class="col-sm-2 control-label">模拟拼团：</label>
                            <div class="col-sm-4">
                                <div class="radio i-checks" style="height: 60px;">
                                <label class="group_simulate"><input type="radio" value="1" name="is_fake_pink" ><i></i>开启</label>
                                <label class="group_simulate"><input type="radio" value="2" name="is_fake_pink" checked><i></i>关闭</label>
                               </div>
                            </div>
                        </div>
                        <div class="group_simulates" name="group_simulate" style="display: none;">
                        <div class="form-group">
                            <label class="col-sm-2 control-label">补全比例：</label>
                            <div class="col-sm-4">
                                <input name="fake_pink_number" style="width: 40%" type="number"  lay-verify="number"
                                            v-model="formData.money" autocomplete="off" class="layui-input" >
                            </div>
                        </div>
                        </div>
                    </div>

                </div>
                
                </div>
              </div>
                </div>
                    <div class="form-group">
                        <div class="col-sm-4 col-sm-offset-3">
                            <button class="btn btn-primary" type="submit">提交</button>
                            <button class="btn btn-default historygo" type="button">返回</button>
                        </div>
                    </div>
                </form>
            </div>
                
        </div>
    </div>
<script>
layui.use(['upload', 'element', 'layer','layedit','laydate'], function(){
  var $ = layui.jquery
  ,upload = layui.upload
  ,element = layui.element
  ,layedit = layui.layedit
  ,layer = layui.layer
  ,laydate = layui.laydate;
layedit.build('demo'); 
    laydate.render({
    elem: '#test5'
    ,type: 'datetime'
  });
  var ue = UE.getEditor('editor_id',{});
   $('.pay').on('ifChecked', function(event){  
        var type = $(event.target).val();
        if( type==1 ){
            $('.payyer').show();
            
        }else{
            $('.payyer').hide();
        }
        
    })
    $('.member').on('ifChecked', function(event){  
        var type = $(event.target).val();
        if( type==1 ){
            $('.members').show();
            
        }else{
            $('.members').hide();
        }
        
    })
     $('.group').on('ifChecked', function(event){  
        var type = $(event.target).val();
        if( type==2 ){
            $('.groups').show();
            
        }else{
            $('.groups').hide();
        }
        
    })
    $('.group_simulate').on('ifChecked', function(event){  
        var type = $(event.target).val();
        if( type==1 ){
            $('.group_simulates').show();
            
        }else{
            $('.group_simulates').hide();
        }
        
    })
  $("#matter").on('click',function(){
   layer.open({
      type:2,
      title:'选择素材',
      area: ['500px','500px'],
      shade:0.2,
      shadeClose:true,
      content :"{:url('Map/getsu')}",
      iframeAuto:true
   });
  });
  //常规使用 - 普通图片上传
  var uploadInst = upload.render({
    elem: '#test1'
    ,url: '{:url('Map/upload')}' //改成您自己的上传接口
    ,before: function(obj){
      //预读本地文件示例，不支持ie8
      obj.preview(function(index, file, result){
        $('#demo1').attr('src', result); //图片链接（base64）
      });
      
      element.progress('demo', '0%'); //进度条复位
      layer.msg('上传中', {icon: 16, time: 0});
    }
    ,done: function(res){
      //如果上传失败
      if(res.code > 0){
        return layer.msg('上传失败');
      }else{
        $('#image').val(res.data);
        console.log(res.data);
        return layer.msg('上传成功');
      }
      //上传成功的一些操作
      //……
      $('#demoText').html(''); //置空上传失败的状态
    }
    ,error: function(){
      //演示失败状态，并实现重传
      var demoText = $('#demoText');
      demoText.html('<span style="color: #FF5722;">上传失败</span> <a class="layui-btn layui-btn-xs demo-reload">重试</a>');
      demoText.find('.demo-reload').on('click', function(){
        uploadInst.upload();
      });
    }
    //进度条
    ,progress: function(n, elem, e){
      element.progress('demo', n + '%'); //可配合 layui 进度条元素使用
      if(n == 100){
        layer.msg('上传完毕', {icon: 1});
      }
    }
  });
  var uploadInst = upload.render({
    elem: '#test2'
    ,url: '{:url('Map/upload')}' //改成您自己的上传接口
    ,before: function(obj){
      //预读本地文件示例，不支持ie8
      obj.preview(function(index, file, result){
        $('#demo2').attr('src', result); //图片链接（base64）
      });
      
      element.progress('demo', '0%'); //进度条复位
      layer.msg('上传中', {icon: 16, time: 0});
    }
    ,done: function(res){
      //如果上传失败
      if(res.code > 0){
        return layer.msg('上传失败');
      }else{
        $('#banner').val(res.data);
        return layer.msg('上传成功');
      }
      //上传成功的一些操作
      //……
      $('#demoText').html(''); //置空上传失败的状态
    }
    ,error: function(){
      //演示失败状态，并实现重传
      var demoText = $('#demoText');
      demoText.html('<span style="color: #FF5722;">上传失败</span> <a class="layui-btn layui-btn-xs demo-reload">重试</a>');
      demoText.find('.demo-reload').on('click', function(){
        uploadInst.upload();
      });
    }
    //进度条
    ,progress: function(n, elem, e){
      element.progress('demo', n + '%'); //可配合 layui 进度条元素使用
      if(n == 100){
        layer.msg('上传完毕', {icon: 1});
      }
    }
  });
  var uploadInst = upload.render({
    elem: '#test3'
    ,url: '{:url('Map/upload')}' //改成您自己的上传接口
    ,before: function(obj){
      //预读本地文件示例，不支持ie8
      obj.preview(function(index, file, result){
        $('#demo3').attr('src', result); //图片链接（base64）
      });
      
      element.progress('demo', '0%'); //进度条复位
      layer.msg('上传中', {icon: 16, time: 0});
    }
    ,done: function(res){
      //如果上传失败
      if(res.code > 0){
        return layer.msg('上传失败');
      }else{
        $('#poster_image').val(res.data);
        return layer.msg('上传成功');
      }
      //上传成功的一些操作
      //……
      $('#demoText').html(''); //置空上传失败的状态
    }
    ,error: function(){
      //演示失败状态，并实现重传
      var demoText = $('#demoText');
      demoText.html('<span style="color: #FF5722;">上传失败</span> <a class="layui-btn layui-btn-xs demo-reload">重试</a>');
      demoText.find('.demo-reload').on('click', function(){
        uploadInst.upload();
      });
    }
    //进度条
    ,progress: function(n, elem, e){
      element.progress('demo', n + '%'); //可配合 layui 进度条元素使用
      if(n == 100){
        layer.msg('上传完毕', {icon: 1});
      }
    }
  });  var uploadInst = upload.render({
    elem: '#test4'
    ,url: '{:url('Map/upload')}' //改成您自己的上传接口
    ,before: function(obj){
      //预读本地文件示例，不支持ie8
      obj.preview(function(index, file, result){
        $('#demo4').attr('src', result); //图片链接（base64）
      });
      
      element.progress('demo', '0%'); //进度条复位
      layer.msg('上传中', {icon: 16, time: 0});
    }
    ,done: function(res){
      //如果上传失败
      if(res.code > 0){
        return layer.msg('上传失败');
      }else{
        $('#service_code').val(res.data);
        return layer.msg('上传成功');
      }
      //上传成功的一些操作
      //……
      $('#demoText').html(''); //置空上传失败的状态
    }
    ,error: function(){
      //演示失败状态，并实现重传
      var demoText = $('#demoText');
      demoText.html('<span style="color: #FF5722;">上传失败</span> <a class="layui-btn layui-btn-xs demo-reload">重试</a>');
      demoText.find('.demo-reload').on('click', function(){
        uploadInst.upload();
      });
    }
    //进度条
    ,progress: function(n, elem, e){
      element.progress('demo', n + '%'); //可配合 layui 进度条元素使用
      if(n == 100){
        layer.msg('上传完毕', {icon: 1});
      }
    }
  });
  upload.render({
    elem: '#test11'
    ,url: '{:url('Map/upload')}' //改成您自己的上传接口
    ,accept: 'video' //视频
    ,done: function(res){
      layer.msg('上传成功');
     $('#link').val(res.data);
     var html='<div><video style="width: 100%" src="'+res.data+'" class="video-ue" controls="controls"><source src="'+res.data+'"></source></video></div> <span style="color:white">.</span>';
       ue.setContent(html,true);
      console.log(res)
    }
  });
});
</script>

{/block}
